import React, { useEffect, useState, Key } from 'react'
import { Button, Card, Form, Input, Table, message, Tooltip } from 'antd';
import { SearchOutlined, EditOutlined, RestOutlined } from "@ant-design/icons"
import style from "./index.module.css"
import { batchDeleteHospitalRequest, deleteHospitalSetByIdRequest, getHospitalSetListRequire } from '@/api/hospital/hospitalSet';
import { getHospitalSetListRecordsType, getHospitalSetListRecordsItemType } from '@/api/hospital/model/hospitalSetType';
import { FieldsValueType } from "./indexType"
import { useNavigate } from 'react-router-dom';

export default function HospitalSet() {
  const [hospitalSetList, setHospitalSetList] = useState<getHospitalSetListRecordsType>([])
  // 当前页数current: 1,
  const [current, setCurrent] = useState(1)
  // 每页条数pageSize: 4,
  const [pageSize, setPageSize] = useState(4)
  // 数据总数total: 60,
  const [total, setTotal] = useState(0)
  // 设置loading
  const [isTrue, setIsTrue] = useState(false)

  const [fieldValue, setFieldValue] = useState<FieldsValueType>({})

  const navigate = useNavigate()

  const [reRender, setRerender] = useState(true)

  //批量删除是否被选中
  const [isSelect, setIsSelect] = useState(true)

  //保存批量删除的值
  const [batchDelete, setBatchDelete] = useState<Key[]>([])


  useEffect(() => {
    setIsTrue(true)
    const getHospitalSetList = async () => {
      // console.log(fieldValue,"111");

      const re = await getHospitalSetListRequire({
        page: current,   //当前页码
        limit: pageSize,   //每页记录数
        ...fieldValue
      })
      // console.log(re);   
      // console.log(re.records);
      setHospitalSetList(re.records)
      // console.log(re.records);

      setTotal(re.total)
      setIsTrue(false)
    }
    getHospitalSetList()
  }, [current, pageSize, fieldValue, reRender])

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    }, {
      title: '医院名称',
      dataIndex: 'hosname',
    }, {
      title: '医院编号',
      dataIndex: 'hoscode',
    }, {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    }, {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    }, {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    }, {
      title: '操作',
      dataIndex: 'do',
      fixed: "right" as "right",
      render(_: any, data: getHospitalSetListRecordsItemType) {
        // console.log(data);
        const { id } = data
        // console.log(id);        
        return (
          <div>
            <Tooltip title="修改信息">
              <Button
                type='primary'
                onClick={() => { navigate(`/syt/hospital/hospitalupdata/${id}`) }}
                icon={<EditOutlined />}
                className={style.fixedBtn}
              ></Button>
            </Tooltip>
            <Tooltip title="删除信息">
              <Button
                type='primary'
                danger
                icon={<RestOutlined />}
                onClick={deleteHospitalHandle(id)}
              ></Button>
            </Tooltip>
          </div>
        )
      }
    },

  ];

  const pageChangeHandle = (current: number, pageSize: number) => {
    // console.log(page, pageSize);
    setCurrent(current)
    setPageSize(pageSize)
  }

  const searchHosFinishHandle = (a: FieldsValueType) => {
    // console.log(a);
    setFieldValue(a)
  }

  const addHospitalHandle = () => {
    navigate("/syt/hospital/hospitaladd/")
  }

  const deleteHospitalHandle = (id: number) => {
    return async () => {
      await deleteHospitalSetByIdRequest(id)
      setRerender(!reRender)
      message.success("删除成功")
    }
  } 

  const batchDeleteHospitalHandle = async () => {
    await batchDeleteHospitalRequest(batchDelete)   
    
    message.success("删除成功")
    
    setRerender(!reRender)
    // 初始化改变按钮的状态
    setIsSelect(true)
  }

  return (
    <div className={style.outForm}>
      <Card>
        <Form layout="inline" onFinish={searchHosFinishHandle}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type='default' htmlType='reset'>
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.btns}>
          <Button className={style.btnLeft} type="primary" onClick={addHospitalHandle}>添加</Button>
          <Button type='primary' danger disabled={isSelect} onClick={batchDeleteHospitalHandle}>批量删除</Button>
        </div>
        <Table
          columns={columns}
          dataSource={hospitalSetList}
          bordered
          pagination={{
            // 当前页数
            current,
            // 每页条数
            pageSize,
            // 指定每页可以显示多少条
            pageSizeOptions: [4, 8, 12],
            // 数据总数
            total,
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal() {
              return `总共${total}条`
            },
            onChange: pageChangeHandle,
            showQuickJumper: true
          }}
          rowKey={"id"}
          scroll={{ x: 1100 }}
          loading={isTrue}
          rowSelection={{
            onChange(ids: Key[]) {
              setIsSelect(!ids.length)
              setBatchDelete(ids)              
            }
          }}

        />
      </Card>
    </div>
  )
}
